<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Effects Lab Page</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css">
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
    <script type="text/javascript" src="../scripts/jqia2.support.js"></script>
    <script type="text/javascript">
      $(function(){

        $('#controlPanelForm').bind('submit',function(){
          var effect = $('#effectsContainer :radio:checked').val();
          var speed = $('#speedContainer :radio:checked').val();
          if (speed=='custom') {
            speed = parseInt($('#speedValueControl').val());
            if (isNaN(speed)||(speed<0)) speed='normal';
          }
          var opacity = new Number($('#opacityValueControl').val())/100.0;
          if ((effect=='show'||effect=='hide'||effect=='toggle')&&speed=='none') {
            showCommand(effect);
            $('.testSubject')[effect]();
          }
          else if (effect=='fadeTo') {
            if (speed=='none') speed = 'normal';
            showCommand(effect,speed,opacity);
            $('.testSubject')[effect](speed,opacity);
          }
          else {
            if (speed=='none') speed = 'normal';
            showCommand(effect,speed);
            $('.testSubject')[effect](speed);
          }
          return false;
        });

        $('#speedContainer').click(function(event){
          $('#speedValueControl').attr('disabled',!$('#customSpeedControl').is(':checked'));
        });

        $('[name="effect"]').click(function(){
          $('[name="opacityValue"]').attr('readonly',!$('[value="fadeTo"]').attr('checked'));
          $('label[for="opacityValueControl"]').css('opacity',$('[value="fadeTo"]').attr('checked') ? 1.0 : 0.5);
        });

        $('#testSubjects :nth-child(3)').hide();
        $('#testSubjects :nth-child(4)').hide();
        $('#testSubjects :nth-child(4),label[for="opacityValueControl"]').css('opacity','0.5');

      });

      function showCommand(effect,speed,opacity) {
        var text = '$(".testSubject").'+ effect + '(';
        if (speed != null) text += ((typeof speed=='string')?"'":"")+speed+((typeof speed=='string')?"'":"");
        if (opacity) text += ','+opacity;
        text += ');';
        $('#appliedCommand').html(text);
      }
    </script>

    <style>
      #effectsContainer {
        float: left;
      }

      #speedPane,#buttonBar,#effectsPane,#opacityPane {
        clear: both;
        margin-bottom: 12px;
      }

      #effectsPane,#speedPane,#opacityPane {
        padding: 4px 0;
        border: 1px solid #9fca6a;
      }

      label {
        float: left;
        text-align: right;
        width: 88px;
        margin-right: 6px;
        font-weight: bold;
      }

      #speedValueControl,#opacityValueControl {
        width: 48px;
      }

      .testSubject {
        float: left;
        border: 1px maroon solid;
        margin-right: 16px;
      }

      div.testSubject {
        width: 120px;
        height: 120px;
      }

      #appliedCommandContainer label {
        width: auto;
      }

      #appliedCommand {
        color: maroon;
      }
    </style>
  </head>

  <body class="fancy">

    <div id="pageContainer">
      <div id="pageContent">

        <h1>jQuery Effects Lab Page</h1>

        <div data-module="Control Panel" data-module-id="controlPane">

          <form id="controlPanelForm" action="">

            <div id="effectsPane">
              <label for="firstEffectsRadio">Effect:</label>
              <div id="effectsContainer">
                <div>
                  <input type="radio" name="effect" value="show" checked id="firstEffectsRadio"/> Show
                  <input type="radio" name="effect" value="hide"/> Hide
                  <input type="radio" name="effect" value="toggle"/> Toggle
                </div>
                <div>
                  <input type="radio" name="effect" value="fadeIn"/> Fade In
                  <input type="radio" name="effect" value="fadeOut"/> Fade Out
                  <input type="radio" name="effect" value="fadeTo"/> Fade To
                </div>
                <div>
                  <input type="radio" name="effect" value="slideDown"/> Slide Down
                  <input type="radio" name="effect" value="slideUp"/> Slide Up
                  <input type="radio" name="effect" value="slideToggle"/> Slide Toggle
                </div>
              </div>
              <div class="separator"></div>
            </div>

            <div id="speedPane">
              <div id="speedContainer">
                <label for="firstSpeedRadio">Speed:</label>
                <input type="radio" name="speed" value="none" checked id="firstSpeedRadio"/> None
                <input type="radio" name="speed" value="slow"/> Slow
                <input type="radio" name="speed" value="normal"/> Normal
                <input type="radio" name="speed" value="fast"/> Fast
                <input type="radio" name="speed" value="custom" id="customSpeedControl"/> Milliseconds:
                <input type="text" name="speedValue" id="speedValueControl" disabled="disabled"/>
              </div>
            </div>

            <div id="opacityPane">
              <div>
                <label for="opacityValueControl">Opacity:</label>
                <input type="text" name="opacityValue" id="opacityValueControl" readonly/> % (for "Fade to")
              </div>
            </div>

            <div id="buttonBar">
              <button id="applyButton" type="submit" class="green90x24">Apply</button>
            </div>

          </form>

          <div id="appliedCommandContainer">
            <label>Applied command:</label> <span id="appliedCommand"></span>
          </div>
          <div class="separator"></div>

        </div>

        <div data-module="Test Subjects" data-module-id="testPane">

          <div id="testSubjects">
            <div class="testSubject">This is a test subject &lt;div&gt; element that starts out displayed.</div>
            <div class="testSubject"><img src="limes.png" alt="test subject 2"/></div>
            <div class="testSubject">This is a test subject &lt;div&gt; element that starts out hidden.</div>
            <div class="testSubject"><img src="belt.png" alt="test subject 3"/></div>
          </div>
          <div style="clear:both"></div>

        </div>

      </div>
    </div>

  </body>
</html>
